<template>
  <div class="aside">
    <div class="logo">
      logo
    </div>
    <div class="nav-memu">
      <el-menu
        router
        :default-active="$route.path"
        :collapse="$store.state.base.navCollapse"
        class="el-menu-vertical-demo"
        background-color="rgb(48, 65, 86)"
        text-color="#fff"
        active-text-color="rgb(12, 138, 255)">
        <template v-for="menu in $store.state.permission.menus">
          <el-menu-item v-if="!menu.children" :index="menu.path" :key="menu.path">
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.label}}</span>
          </el-menu-item>
          <el-submenu :index="menu.label" v-if="menu.children" :key="menu.label">
            <template slot="title">
              <i :class="menu.icon"></i>
              <span>{{menu.label}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="subMenu in menu.children"
                :key="subMenu.path"
                :index="subMenu.path"
              >{{subMenu.label}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.logo{
  height: 100px;
  text-align: center;
  line-height: 100px;
}
::v-deep .el-submenu__title{
  &:hover{
    background-color: rgb(16, 2, 40) !important;
  }
}
::v-deep .el-menu-item{
  &:hover{
    background-color: rgb(16, 2, 40) !important;
  }
  &.is-active{
    background-color: #fff !important;
  }
}
</style>
